<template>
    <div>
        hello world!
        this is a test file

        <p>{{title}}</p>
        <p>{{age}}</p>
        <p>{{name}}</p>

        <button @click="changeage">改变年龄</button>
        <button @click="changename">改变名字</button>
        <button @click="changetitle">改变标题</button>
    </div>
</template>
<script>
import { mapActions, mapGetters, mapMutations, mapState } from "vuex";
export default {
    computed: {
        ...mapGetters([
            "title",
            "name",
            "age"
        ])
        /**
         * 这里相当于
         * title() {
         *  return this.$store.state.title;
         * }
         * 
         * name() {
         *  return this.$store.state.name;
         * },
         * 
         * age() {
         *  return this.$store.state.age;
         * }
         *  */ 
    },
    methods: {
        ...mapMutations([
        ]),
        ...mapActions([
            
        ]),

        changeage() {
        },

        changename() {
        },

        changetitle() {
        }
    },
}
</script>
<style lang="scss">
div {
    font-size: 24px;
}
</style>

